<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <p class="one" ref="one">{{count}}</p>
            <button @click="count++">点击</button>
        </div>
    </div>

</body>
<script>

    // 监听到数据发生改变, 获取标签内更新后的文本

    var vm = new Vue({
        el: "#app",
        data: {
            count: 1,
        },
        computed: {

        },
        watch: {
            count: async function (newVal, oldVal) {
                console.log("count数据发生改变");
                // console.log(this.$refs.one);  // 查看元素时(视觉上有问题) => 看起来像更新后的内容 (元素节点 => 引用类型 -> 直接查看元素节点内存返回最终的结果 -> 其实当前元素的内容还没有发生改变)
                // console.log(this.$refs.one.textContent);  // 实际获取时  还是原本的内容

                // 解析:
                // Vue实例中 数据发生改变 => 视图更新(异步操作)  => 所以无法在数据发生改变之后直接获取视图中更新后的内容

                // 解决方法: 
                // 1. 查看元素内容时,包裹一个setTimeout
                // setTimeout(() => {
                //     console.log(this.$refs.one.textContent);
                // }, 0)

                // 2. Vue实例中 提供了一个方法 $nextTick  
                // a.  $nextTick, 可以接收一个回调函数 => 在视图更新之后执行
                // this.$nextTick(() => {
                //     console.log(this.$refs.one.textContent);
                // })

                // b. $nextTick => 返回值是一个Promise实例 => 等视图更新之后Promise状态才会改变 
                // var res = this.$nextTick()
                // console.log(res);

                await this.$nextTick();
                console.log(this.$refs.one.textContent);





            }
        },
        mounted() {
            // console.log(this.$refs);
            // console.log(this.$refs.one);
            // console.log(this.$refs.two);
        },
    })


    // var arr = [1, 2, 3];
    // console.log(arr);

    // arr.push(4);
    // console.log(arr);



</script>

</html>